<template>
	<view class="myself-container">
		<!-- 头部：头像、账号名和右侧按钮 -->
		<view class="header">
			<view class="left">
				<!-- 头像使用 van-uploader 结合 image -->
				<van-uploader :after-read="onAvatarChange" :show-upload="false">
					<image class="avatar" :src="avatarUrl" @tap="chooseAvatar"></image>
				</van-uploader>
				<view class="account-info">
					<text class="account-name">{{ accountName }}</text>
					<!-- 可能还有手机号或其他信息 -->
					<text class="phone-number">156****9690</text> <!-- 示例手机号 -->
				</view>
			</view>

		</view>

		<!-- 会员区域 -->
		<view class="member-section">
			<text class="member-title">V3 里程会员</text>
			<view class="member-items">
				<text class="member-item">月月领券</text>
				<text class="member-item">酒店会籍</text>
				<text class="member-item">行程意外险</text>
				<text class="member-item">家享行程</text>
			</view>
		</view>

		<!-- 功能图标区域 -->
		<view class="feature-icons">
			<view class="icon-item" @click="goOrder">
				<image class="icon-img" src="/static/icons/order.png"></image> <!-- 占位图标 -->
				<text class="icon-text">订单</text>
			</view>
			<view class="icon-item" @click="goWallet">
				<image class="icon-img" src="/static/icons/wallet.png"></image> <!-- 占位图标 -->
				<text class="icon-text">钱包</text>
			</view>
			<view class="icon-item" @click="goSetting">
				<image class="icon-img" src="/static/icons/setting.png"></image> <!-- 占位图标 -->
				<text class="icon-text">设置</text>
			</view>
			<view class="icon-item" @click="goService">
				<image class="icon-img" src="/static/icons/service.png"></image> <!-- 占位图标 -->
				<text class="icon-text">客服</text>
			</view>
		</view>

		<!-- 优惠券/余额等概览区域 -->
		<view class="overview-cards">
			<view class="card-item" @click="goCoupon">
				<view class="card-value">31张</view>
				<view class="card-label">优惠卡券</view>
			</view>
			<view class="card-item" @click="goWallet">
				<view class="card-value">0元</view>
				<view class="card-label">车费余额</view>
			</view>
			<view class="card-item">
				<view class="card-value">0个</view>
				<view class="card-label">福利金</view>
			</view>
			<view class="card-item">
				<view class="card-value">2.38万</view>
				<view class="card-label">预估可借</view>
			</view>
		</view>

		<!-- 推广活动区域 -->
		<view class="promo-banner">
			<!-- 这里放置推广活动图片轮播 -->
			<swiper class="banner-swiper" circular indicator-dots="true" autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(banner, index) in bannerList" :key="index">
					<image class="banner-img" :src="banner" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 成为司机、省钱套餐等区块 -->
		<view class="driver-promo-section">
			<!-- 成为司机 -->
			<view class="driver-item">
				<image class="driver-icon" src="/static/icons/driver.png"></image> <!-- 占位图标 -->
				<view class="driver-text">
					<text class="title">成为司机</text>
					<text class="desc">跑车赚钱</text>
				</view>
			</view>
			<!-- 省钱套餐 -->
			<view class="driver-item">
				<image class="driver-icon" src="/static/icons/package.png"></image> <!-- 占位图标 -->
				<view class="driver-text">
					<text class="title">省钱套餐</text>
					<text class="desc">出行必备福利</text>
				</view>
			</view>
			<!-- 天天神券 -->
			<view class="driver-item">
				<image class="driver-icon" src="/static/icons/coupon.png"></image> <!-- 占位图标 -->
				<view class="driver-text">
					<text class="title">天天神券</text>
					<text class="desc">打车补贴</text>
				</view>
			</view>
			<!-- 福利中心 -->
			<view class="driver-item">
				<image class="driver-icon" src="/static/icons/gift.png"></image> <!-- 占位图标 -->
				<view class="driver-text">
					<text class="title">福利中心</text>
					<text class="desc">领打车费</text>
				</view>
			</view>
		</view>

		<!-- 其他推广区域 -->
		<view class="other-promo-section">
			<!-- 免单券 -->
			<view class="promo-item">
				<image class="promo-icon" src="/static/icons/free.png"></image> <!-- 占位图标 -->
				<text class="promo-text">北京免单券</text>
			</view>
			<!-- 邀请赚钱金 -->
			<view class="promo-item">
				<image class="promo-icon" src="/static/icons/money.png"></image> <!-- 占位图标 -->
				<text class="promo-text">邀请赚钱金</text>
			</view>
			<!-- 官方福利群 -->
			<view class="promo-item">
				<image class="promo-icon" src="/static/icons/group.png"></image> <!-- 占位图标 -->
				<text class="promo-text">官方福利群</text>
			</view>
			<!-- 账单返现 -->
			<view class="promo-item">
				<image class="promo-icon" src="/static/icons/bill.png"></image> <!-- 占位图标 -->
				<text class="promo-text">账单返现</text>
			</view>
		</view>

		<!-- 成为滴滴司机 / 车主服务 -->
		<view class="driver-service-section">
			<view class="service-item">
				<!-- 成为滴滴司机内容 -->
				<text class="service-title">成为滴滴司机</text>
				<text class="service-desc">立即注册，接单赚钱</text>
				<!-- 可能有配图 -->
				<image class="service-img" src="/static/promo1.png"></image> <!-- 占位图片 -->
			</view>
			<view class="service-item">
				<!-- 车主服务内容 -->
				<text class="service-title">车主服务</text>
				<text class="service-desc">有车的人就用TA</text>
				<!-- 可能有配图 -->
				<image class="service-img" src="/static/promo2.png"></image> <!-- 占位图片 -->
			</view>
		</view>

		<!-- 洗车活动 -->
		<view class="carwash-section">
			<image class="carwash-img" src="/static/carwash-banner.png" mode="widthFix"></image> <!-- 占位图片 -->
		</view>

		<!-- 使用底部导航组件 -->
		<!-- <bottom-nav :nav-list="bottomNavList" :active-index="2" @nav-change="handleNavChange"></bottom-nav> -->

	</view>
</template>

<script>
	// 引入底部导航组件
	// import BottomNav from '../../components/BottomNav/BottomNav.vue'

	export default {
		
		data() {
			return {
				avatarUrl: 'https://jf2411-dd.oss-cn-hangzhou.aliyuncs.com/passenger.jpg', // 默认头像
				accountName: '未登录用户',
				// 轮播图图片列表
				bannerList: [
					'/static/img/1.webp', // 使用您原来的图片
					'/static/img/2.webp', // 使用之前占位的图片作为示例
					// 您可以在这里添加更多图片路径
				],
				// 底部导航数据
				// bottomNavList: [{
				// 		text: '首页',
				// 		path: '/pages/firstPage/firstPage',
				// 		icon: '/static/icons/home.png'
				// 	},
				// 	{
				// 		text: '订单',
				// 		path: '/pages/userOrder/userOrder',
				// 		icon: '/static/icons/order.png'
				// 	},
				// 	{
				// 		text: '我的',
				// 		path: '/pages/mySelf/mySelf',
				// 		icon: '/static/icons/my.png'
				// 	},
				// ],
				// 当前选中的底部导航索引
				// currentNavIndex: 4 // 默认选中'我的' (索引从0开始)
			}
		},
		mounted() {
			// 模拟用户登录后获取用户信息
			// 这里可以调用登录接口，获取用户信息
			// 假设用户信息已经在全局存储中
			const userInfo = uni.getStorageSync('user');	
			if (userInfo) {
				this.accountName = '你好！'+userInfo.name || '未登录用户';
				this.avatarUrl = userInfo.avatarUrl || 'https://jf2411-dd.oss-cn-hangzhou.aliyuncs.com/passenger.jpg';	
			}
		},
		methods: {
			// 处理底部导航切换
			// handleNavChange(index) {
			// 	// 检查索引是否有效
			// 	if (this.bottomNavList && index >= 0 && index < this.bottomNavList.length) {
			// 		const targetPath = this.bottomNavList[index].path;
			// 		// 避免重复跳转当前页面或路径无效
			// 		if (this.bottomNavList[index] && targetPath && targetPath !== this.$route.path) {
			// 			// uni.switchTab 只适用于 tabBar 页面
			// 			// 如果底部导航对应的是非 tabBar 页面，需要使用 uni.navigateTo 或 uni.redirectTo
			// 			// 这里假设底部导航项都是 tabBar 页面
			// 			uni.switchTab({
			// 				url: targetPath,
			// 				success: () => {
			// 					console.log('底部导航跳转成功:', targetPath);
			// 				},
			// 				fail: (err) => {
			// 					console.error('底部导航跳转失败:', targetPath, err);
			// 					uni.showToast({
			// 						title: '跳转失败',
			// 						icon: 'none'
			// 					});
			// 				}
			// 			});
			// 		} else if (targetPath && targetPath === this.$route.path) {
			// 			// 点击当前页面对应的底部导航项，可以执行一些操作，如刷新
			// 			console.log('点击当前页面底部导航:', targetPath);
			// 			// 例如：uni.reLaunch({ url: targetPath }); // 重新加载当前页面
			// 		}
			// 	} else {
			// 		console.error('无效或越界的底部导航索引:', index, 'bottomNavList长度:', this.bottomNavList ? this.bottomNavList
			// 			.length : 'null/undefined');
			// 	}
			// },
			chooseAvatar() {
				// 选择头像逻辑
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.avatarUrl = res.tempFilePaths[0];
					}
				});
			},
			onAvatarChange(e) {
				// 上传头像逻辑（可根据实际需求完善）
				this.avatarUrl = e.file.url || e.detail.file.url;
			},
			goOrder() {
				uni.switchTab({
					url: '/pages/userOrder/userOrder'
				});
			},
			goWallet() {
				uni.navigateTo({
					url: '/pages/myMoney/myMoney'
				});
			},
			goSetting() {
				uni.navigateTo({
					url: '/pages/customerService/customerService'
				});
			},
			goService() {
				uni.navigateTo({
					url: '/pages/customerService/customerService'
				});
			},
			goCoupon() {
				uni.navigateTo({
					url: '/pages/couponCenter/couponCenter'
				});
			},
			goAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				});
			},
			goContact() {
				uni.navigateTo({
					url: '/pages/contact/contact'
				});
			}
		}
	}
</script>

<style>
	.myself-container {
		background: #f7f8fa;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
		/* 适配底部安全区域 */
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
	}

	.header .left {
		display: flex;
		align-items: center;
	}

	.header .avatar {
		width: 100rpx;
		/* 调整头像大小 */
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		border: 2rpx solid #eee;
		/* 添加一个边框 */
	}

	.header .account-info {
		display: flex;
		flex-direction: column;
	}

	.header .account-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.header .phone-number {
		font-size: 24rpx;
		color: #666;
		margin-top: 4rpx;
	}

	.header .right {
		display: flex;
		align-items: center;
	}

	.header .icon {
		font-size: 40rpx;
		margin-left: 30rpx;
		/* 调整图标间隔 */
		color: #666;
		/* 调整图标颜色 */
	}

	.header .location-icon {
		font-size: 44rpx;
		/* 定位图标可能需要稍大 */
	}

	.member-section {
		background: linear-gradient(to right, #3a4a5a, #5a6a7a);
		/* 渐变背景 */
		color: #fff;
		margin: 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
	}

	.member-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}

	.member-items {
		display: flex;
		justify-content: space-around;
	}

	.member-item {
		font-size: 28rpx;
		opacity: 0.9;
		/* 稍微透明 */
	}

	.feature-icons {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		background-color: #fff;
		margin: 0 20rpx 20rpx 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		/* 添加阴影 */
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		/* 每行4个 */
	}

	.icon-img {
		width: 80rpx;
		/* 调整图标大小 */
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.icon-text {
		font-size: 26rpx;
		/* 调整文字大小 */
		color: #333;
	}

	.overview-cards {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		margin: 0 20rpx 20rpx 20rpx;
		padding: 20rpx 0;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		/* 添加阴影 */
	}

	.card-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		/* 每行4个 */
	}

	.card-value {
		font-size: 32rpx;
		font-weight: bold;
		color: #ff9800;
		/* 示例颜色 */
		margin-bottom: 5rpx;
	}

	.card-label {
		font-size: 24rpx;
		color: #666;
	}

	.promo-banner {
		margin: 0 20rpx 20rpx 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		/* 添加阴影 */
		height: 200rpx;
		/* 调整轮播图容器高度，您可以根据需要修改 */
	}

	.banner-swiper {
		width: 100%;
		height: 100%;
		/* 轮播图高度填充容器 */
	}

	.banner-img {
		width: 100%;
		height: 100%;
		/* 图片高度填充轮播项 */
		display: block;
	}

	.driver-promo-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		/* 保持项目之间的间距 */
		margin: 0 20rpx 20rpx 20rpx;
		/* 可以根据需要调整列之间的间距，例如使用 column-gap */
		column-gap: 4%;
		/* 示例：设置列之间的间距 */
	}

	.driver-item {
		display: flex;
		align-items: center;
		/* 使用 flex-basis 结合 flex-grow 来实现一行2个 */
		flex-basis: 48%;
		/* 设置基础宽度 */
		flex-grow: 0;
		/* 不允许项目拉伸 */
		box-sizing: border-box;
		/* 将 padding 和 border 包含在宽度内 */
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		/* 保持行之间的间距 */
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.driver-item .driver-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.driver-item .driver-text {
		display: flex;
		flex-direction: column;
	}

	.driver-item .title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.driver-item .desc {
		font-size: 24rpx;
		color: #666;
		margin-top: 4rpx;
	}

	.other-promo-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 20rpx 20rpx 20rpx;
	}

	.promo-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 23%;
		/* 每行4个，留点间隔 */
		margin-bottom: 20rpx;
	}

	.promo-item .promo-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.promo-item .promo-text {
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}

	.driver-service-section {
		display: flex;
		justify-content: space-between;
		margin: 0 20rpx 20rpx 20rpx;
	}

	.service-item {
		width: 48%;
		/* 每行2个 */
		background-color: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		display: flex;
		/* flex 布局 */
		flex-direction: column;
		/* 垂直排列 */
		justify-content: space-between;
		/* 内容分散对齐 */
	}

	.service-item .service-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.service-item .service-desc {
		font-size: 24rpx;
		color: #666;
		margin-top: 4rpx;
		margin-bottom: 10rpx;
		/* 和图片间隔 */
	}

	.service-item .service-img {
		width: 100%;
		/* 图片宽度适应容器 */
		height: 150rpx;
		/* 示例高度，根据实际图片调整 */
		object-fit: cover;
		/* 覆盖整个区域 */
		border-radius: 8rpx;
		/* 图片圆角 */
	}

	.carwash-section {
		margin: 0 20rpx 20rpx 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		/* 添加阴影 */
	}

	.carwash-img {
		width: 100%;
		display: block;
	}
</style>